<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、日期选择器</h3>
        <div>
          <h4>1.1、带快捷键日期选择器</h4>
          <div class="block">
            <span class="demonstration">带快捷选项</span>
            <el-date-picker v-model="value2" type="daterange" @change="changeTime" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>

        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、多选框</h3>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {

      value1: '',
      value2: '',

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }


    }
  },
  methods: {

    changeTime (val) {
      console.log(val)

    }

  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>